<template>
    <view class="Login_user">
        <view class="header">
        <!-- 去登陆状态 -->
        <button @tap="goToPage('/pages/login/index')" v-if="!userInfo">去登陆</button>
        <!-- 已登录状态 -->
        <view class="logo" v-else>
            <image class="icon" :src="userInfo.avatarUrl"></image>
            <view class="name">{{userInfo.nickName}}</view>
        </view>
        <image v-if="userInfo" :src="userInfo.avatarUrl" class="bg"></image>
        </view>
        <view class="nav">
            <view class="item" @tap="goToPage('/pages/order/index?index=1')">
                <view class="iconfont icon-icon-test"></view>
                <view class="text">待付款</view>
            </view>
            <view class="item" @tap="goToPage('/pages/order/index?index=2')">
                <view class="iconfont icon-daishouhuo"></view>
                <view class="text">待收货</view>
            </view>
            <view class="item" @tap="goToPage('/pages/order/index')">
                <view class="iconfont icon-tuihuo"></view>
                <view class="text">退货/退款</view>
            </view>
            <view class="item" @tap="goToPage('/pages/order/index?index=0')">
                <view class="iconfont icon-quanbudingdan01"></view>
                <view class="text">全部订单</view>
            </view>
        </view>
        <!-- 底部布局 -->
        <view class="footer">
            <view class="item">
                <view class="left" @tap='call'>
                    <view class="iconfont icon-kefu"></view>
                    <view class="text">联系客服</view>
                </view>
                <view class="right">
                    400-618-4000
                </view>
            </view>
            <view class="item">
                <view class="left">
                    <view class="iconfont icon-fankuitianbao"></view>
                    <view class="text">意见反馈</view>
                </view>
                <view class="right"></view>
            </view>
            <view class="item">
                <view class="left">
                    <view class="iconfont icon-banben"></view>
                    <view class="text">当前版本</view>
                </view>
                <view class="right">
                    v4.1.1
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data(){
        return{
            //用户信息
            userInfo:{}
        }
    },
    onShow(){
        this.userInfo=uni.getStorageSync('userInfo')
    },
    methods:{
        // 拨打客服电话API方法
        call(){
            uni.makePhoneCall({
                phoneNumber:'400-618-4000'
            })
        },
        goToPage(url){
            uni.navigateTo({
				url
			})
        }
    }

}
</script>

<style lang="less" scoped>
.Login_user{
     background-color: #f9f9f9;
    .header{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 329rpx;
        background-color: #f9f9f9;
        .bg{
            filter: blur(20rpx);
		    position: absolute;
		    left: 0;
		    right: 0;
		    top:0;
		    bottom: 0;
		    width: 100%;
		    height: 100%;
        }
        button{
            display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 36rpx;
			background-color: #07C160;
			border-radius: 8rpx;
			width: 352rpx;
			height: 88rpx;
        }
        .logo{
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 1;
            .icon{
                width: 172rpx;
                height: 172rpx;
                border-radius: 50%;
            }
            .name{
                color:#fff;
                font-weight: 600;
                font-size: 32rpx;
                margin-top: 15rpx;
            }
        }
    }
    .nav{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 726rpx;
        height: 144rpx;
        margin: 20rpx 12rpx;
        border-radius: 20rpx;
        background-color: #fff;
        .item{
            display: flex;
            flex-direction: column;
            align-items: center;
            .iconfont{
                font-size: 62rpx;
            }
            .text{
                font-size: 28rpx;
                margin-top: 13rpx;
            }
        }
    }
    .footer{
        background-color: #fff;
        margin: 0 12rpx;
        height: 520rpx;
        padding: 0 20rpx;
        .item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 101rpx;
            border-bottom: 1rpx solid #d0d0d0;
            .left{
                display: flex;
                align-items: center;
                padding-left: 10rpx;
                .iconfont{
                    font-size: 55rpx;
                }
                .text{
                    font-size: 28rpx;
                    font-weight: 500;
                    margin-left: 25rpx;
                }
            }
            .right{
                font-size: 28rpx;
                font-weight: 500;
                padding-right: 12rpx;
            }
        }
    }
}
</style>